<template>
  <div class="system-container">
    <!-- 顶部标题和操作栏 -->
    <div class="header-section">
      <h1 class="system-title">{{ ksdisaplay ? '专科组管理' : '科室大类管理' }}</h1>
      <div class="action-bar">
        <el-row :gutter="15" justify="space-between">
          <el-col :span="18">
            <div class="search-container">
              <el-input
                  v-if="ksdisaplay"
                  v-model="specializedGroupName"
                  placeholder="请输入专科组名称"
                  class="search-input"
                  clearable
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
              <el-input
                  v-else
                  v-model="departmentName"
                  placeholder="请输入科室大类名称"
                  class="search-input"
                  clearable
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
              <el-button type="primary" @click="refreshs" class="action-btn">
                <el-icon><Search /></el-icon>搜索
              </el-button>
            </div>
          </el-col>
          <el-col :span="6" class="btn-group">
            <el-button type="success" @click="ksdisaplay?saveSpecializedGroup():saveDepartment()" class="action-btn">
              <el-icon><Plus /></el-icon>{{ksdisaplay?"添加专科组":"添加科室"}}
            </el-button>
            <el-button type="info" @click="convert" class="action-btn">
              <el-icon><Switch /></el-icon>{{!ksdisaplay?"查看专科组":"查看科室"}}
            </el-button>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 数据表格区域 -->
    <div class="data-section">
      <el-card shadow="hover" class="data-card">
        <!-- 专科组表格 -->
        <div v-if="ksdisaplay">
          <el-table
              :data="page.list"
              style="width: 100%"
              stripe
              v-loading="loading"
              height="calc(100vh - 320px)"
          >
            <el-table-column prop="id" label="专科组ID" align="center">
            </el-table-column>
            <el-table-column prop="name" label="专科组名称">
            </el-table-column>
            <el-table-column prop="department.name" label="所属科室大类">
            </el-table-column>
            <el-table-column label="操作" width="200" align="center">
              <template v-slot="scope">
                <div class="action-buttons">
                  <el-button type="warning" size="small" @click="saveSpecializedGroup(scope.row)" class="action-icon">
                    <el-icon><Edit /></el-icon>修改
                  </el-button>
                  <el-button type="danger" size="small" @click="delSpecializedGroup(scope.row)" class="action-icon">
                    <el-icon><Delete /></el-icon>删除
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页控件 -->
          <div class="pagination-container">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="paging"
                :current-page="page.pageNum"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total">
            </el-pagination>
          </div>
        </div>

        <!-- 科室大类表格 -->
        <div v-else>
          <el-table
              :data="page1.list"
              style="width: 100%"
              stripe
              v-loading="loading"
              height="calc(100vh - 320px)"
          >
            <el-table-column prop="id" label="科室ID" align="center">
            </el-table-column>
            <el-table-column prop="name" label="科室大类名称">
            </el-table-column>
            <el-table-column label="內属专科组">
              <template v-slot="scope">
                <div class="tag-container">
                  <el-tag
                      v-for="item in scope.row.specializedGroups"
                      :key="item.id"
                      type="success"
                      class="custom-tag"
                  >
                    {{item.name}}
                  </el-tag>
                  <el-tag v-if="!scope.row.specializedGroups || scope.row.specializedGroups.length === 0" type="info">
                    暂无专科组
                  </el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200" align="center">
              <template v-slot="scope">
                <div class="action-buttons">
                  <el-button type="warning" size="small" @click="saveDepartment(scope.row)" class="action-icon">
                    <el-icon><Edit /></el-icon>修改
                  </el-button>
                  <el-button type="danger" size="small" @click="delDepartment(scope.row)" class="action-icon">
                    <el-icon><Delete /></el-icon>删除
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页控件 -->
          <div class="pagination-container">
            <el-pagination
                @size-change="handleSizeChange1"
                @current-change="paging1"
                :current-page="page1.pageNum"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="page1.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page1.total">
            </el-pagination>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 专科组弹窗 -->
    <el-dialog
        :title="specializedGroup.id ? '修改专科组' : '添加专科组'"
        v-model="dialogFormVisible"
        width="500px"
        :close-on-click-modal="false"
        class="custom-dialog"
    >
      <el-form :model="specializedGroup" label-position="top">
        <el-form-item label="专科组名称" :label-width="formLabelWidth">
          <el-input
              v-model="specializedGroup.name"
              placeholder="请输入专科组名称"
              clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="所属科室" :label-width="formLabelWidth">
          <el-select
              v-model="specializedGroup.department.id"
              placeholder="请选择所属科室"
              style="width: 100%"
              clearable
          >
            <el-option
                v-for="item in departmentList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="close()" class="cancel-btn">取 消</el-button>
          <el-button type="primary" @click="UISpecializedGroup" class="confirm-btn">确 定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 科室弹窗 -->
    <el-dialog
        :title="department.id ? '修改科室' : '添加科室'"
        v-model="dialogFormVisible1"
        width="500px"
        :close-on-click-modal="false"
        class="custom-dialog"
    >
      <el-form :model="department" label-position="top">
        <el-form-item label="科室名称" :label-width="formLabelWidth">
          <el-input
              v-model="department.name"
              placeholder="请输入科室大类名称"
              clearable
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="close" class="cancel-btn">取 消</el-button>
          <el-button type="primary" @click="UIDepartment" class="confirm-btn">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import axios from "axios";
import { ElMessage } from 'element-plus'
import { Search, Plus, Switch, Edit, Delete } from '@element-plus/icons-vue'

const page = ref({})
const page1 = ref({})
const pageSize = ref(10)
const pageSize1 = ref(10)
const departmentName = ref("")
const specializedGroupName = ref("")
const ksdisaplay = ref(true)
const departmentList = ref([])
const specializedGroupList = ref([])
const specializedGroup = ref({
  id: null,
  name: '',
  department: {
    id: null,
    name: ''
  }
})
const department = ref({
  id: null,
  name: '',
  specializedGroups: []
})
const dialogFormVisible = ref(false)
const dialogFormVisible1 = ref(false)
const formLabelWidth = ref('120px')
const loading = ref(false)

// 刷新
const refreshs = () => {
  loading.value = true
  setTimeout(() => {
    if (ksdisaplay.value) {
      specializedGroup.value = {}
      paging(1)
    } else {
      department.value = {}
      paging1(1)
    }
    loading.value = false
  }, 500)
}

// 查看科室大类和专科组大类转换
const convert = () => {
  ksdisaplay.value = !ksdisaplay.value
}

// 添加和修改专科组大类
const saveSpecializedGroup = (item) => {
  dialogFormVisible.value = true
  if (item) {
    specializedGroup.value = { ...item }
  } else {
    specializedGroup.value = {
      id: null,
      name: '',
      department: {
        id: null,
        name: ''
      }
    }
  }
}

const UISpecializedGroup = () => {
  if (specializedGroup.value.name != '' && specializedGroup.value.department.id != null) {
    axios.post('specialized_group/save', specializedGroup.value).then(res => {
      if (res.data.code == 200) {
        ElMessage({
          message: res.data.msg,
          type: 'success',
          duration: 2000
        })
      } else {
        ElMessage.error(res.data.msg)
      }
      paging(1)
      close()
    })
  } else {
    ElMessage({
      message: '请输入完整信息',
      type: 'warning',
      duration: 2000
    })
  }
}

// 添加和修改科室大类
const saveDepartment = (item) => {
  if (item) {
    department.value = { ...item }
  } else {
    department.value = {
      id: null,
      name: '',
      specializedGroups: []
    }
  }
  dialogFormVisible1.value = true
}

const UIDepartment = () => {
  if (department.value.name != '') {
    axios.post('department/save', department.value).then(res => {
      if (res.data.code == 200) {
        ElMessage({
          message: res.data.msg,
          type: 'success',
          duration: 2000
        })
      } else {
        ElMessage.error(res.data.msg)
      }
      paging1(1)
      close()
    })
  } else {
    ElMessage({
      message: '请输入完整信息',
      type: 'warning',
      duration: 2000
    })
  }
}

// 删除专科组大类
const delSpecializedGroup = (item) => {
  axios.post('specialized_group/del?id=' + item.id).then(res => {
    if (res.data.code == 200) {
      ElMessage({
        message: res.data.msg,
        type: 'success',
        duration: 2000
      })
    } else {
      ElMessage.error(res.data.msg)
    }
    paging(1)
  })
}

// 删除科室大类
const delDepartment = (item) => {
  axios.post('department/del?id=' + item.id).then(res => {
    if (res.data.code == 200) {
      ElMessage({
        message: res.data.msg,
        type: 'success',
        duration: 2000
      })
    } else {
      ElMessage.error(res.data.msg)
    }
    paging1(1)
  })
}

// 分页 专科组
const paging = (curPage) => {
  loading.value = true
  axios.get('specialized_group/getByNameAndPage', {
    params: {
      name: specializedGroupName.value,
      pageNum: curPage,
      pageSize: pageSize.value
    }
  }).then(res => {
    page.value = res.data
    loading.value = false
  })
}

// 分页 科室大类
const paging1 = (curPage) => {
  loading.value = true
  axios.get('department/getByNameAndPage', {
    params: {
      name: departmentName.value,
      pageNum: curPage,
      pageSize: pageSize1.value
    }
  }).then(res => {
    page1.value = res.data
    loading.value = false
  })
}

const handleSizeChange = (ps) => {
  pageSize.value = ps
  paging(1)
}

const handleSizeChange1 = (ps) => {
  pageSize1.value = ps
  paging1(1)
}

// 获取所有的专科组大类
const getalldepartment = () => {
  axios.get('department/getAll').then(res => {
    if (res.data.code == 200) {
      departmentList.value = res.data.data
    } else {
      alert("获取科室大类失败,请刷新")
    }
  })
}

// 关闭
const close = () => {
  department.value = {
    id: null,
    name: '',
    specializedGroups: []
  }
  specializedGroup.value = {
    id: null,
    name: '',
    department: {
      id: null,
      name: ''
    }
  }
  dialogFormVisible.value = false
  dialogFormVisible1.value = false
}

// 页面初始化
onMounted(() => {
  paging(1)
  paging1(1)
  getalldepartment()
})
</script>
<style scoped>
.system-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  background-color: #f5f7fa;
  box-sizing: border-box;
}

.header-section {
  background: linear-gradient(135deg, #409EFF 0%, #337ecc 100%);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  color: white;
}

.system-title {
  margin: 0 0 15px 0;
  font-size: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.system-title:before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 24px;
  background: white;
  margin-right: 12px;
  border-radius: 2px;
}

.search-container {
  display: flex;
  gap: 10px;
}

.search-input {
  flex: 1;
}

.btn-group {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.data-section {
  border-radius: 10px;
  overflow: hidden;
}

.data-card {
  border-radius: 10px;
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.pagination-container {
  display: flex;
  justify-content: center;
  padding: 20px 0 10px;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.action-icon {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.custom-tag {
  border-radius: 12px;
  padding: 0 12px;
  height: 28px;
  line-height: 26px;
}

.custom-dialog {
  border-radius: 12px;
  overflow: hidden;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.cancel-btn {
  background-color: #f0f2f5;
  border-color: #dcdfe6;
  color: #606266;
}

.cancel-btn:hover {
  background-color: #e4e7ed;
  border-color: #c0c4cc;
}

.confirm-btn {
  background: linear-gradient(135deg, #409EFF 0%, #337ecc 100%);
  border: none;
}

.confirm-btn:hover {
  opacity: 0.9;
}

/* 新增样式确保表格占满宽度 */
.el-table {
  width: 100% !important;
}

.el-table-column {
  min-width: 120px;
}

.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
}
</style>